<template>
	<view class="xubao-result">
		<view class="create-project-form">
			<view class="create-item">
				<view class="info-item-title">
					<text>执行结果</text>
					<text class="import-tips">*</text>
				</view>
				<input class="info-item-input" type="text" @click="handleOpenResultPopup"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择执行结果" v-model="result">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>

			<!-- <view class="create-item">
				<text class="info-item-title">客户意向</text>
				<input class="info-item-input" type="text" @click="handleOpenIntentionPopup"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择客户意向"
					v-model="intention">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view> -->

			<view class="create-item" v-if="isComeShopShow && wxType == 'dingbao'">
				<view class="info-item-title">
					<text>预约日期</text>
					<text class="import-tips">*</text>
				</view>
				<uni-datetime-picker class="info-item-input" type="date" :value="comeShopTime" placeholder="请选择客户预约日期"
					@change="comeShopChange" :border="false" :clear-icon="false" />
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>

			<view class="create-item" v-if="isComeShopShow && wxType == 'dingbao'">
				<view class="info-item-title">
					<text>预约时间</text>
					<text class="import-tips">*</text>
				</view>
				<picker mode="time" :class="{'uni-time-placeholder': comeShopHs == '请选择客户预约时间'}" :value="comeShopHs"
					@change="bindTimeChange">
					<view class="uni-input">{{comeShopHs}}</view>
				</picker>
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>

			<view class="create-item" v-if="isNextContactShow">
				<view class="info-item-title">
					<text>下次联系时间</text>
					<text class="import-tips">*</text>
				</view>
				<uni-datetime-picker class="info-item-input" type="date" :value="nextConnectionTime"
					placeholder="请选择下次联系时间" @change="nextContactChange" :border="false" :clear-icon="false" />
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view>



			<!-- <view class="create-item">
				<view class="info-item-title">
					<text>战败原因</text>
					<text class="import-tips">*</text>
				</view>
				<input class="info-item-input" type="text" @click="handleOpenDefeatPopup"
					placeholder-class="placeholderFontClass" disabled readonly placeholder="请选择战败原因" v-model="defeat">
				<uni-icons class="right-arrow-icon" type="forward" size="14" color="#999"></uni-icons>
			</view> -->

			<view class="create-item">
				<text class="info-item-title">备注</text>
				<input class="info-item-input" type="text" placeholder-class="placeholderFontClass" placeholder="请输入备注"
					v-model="remark">
			</view>
		</view>
		<button class="create-btn" @click.stop.prevent="handleSubmit">提交</button>

		<!-- 执行结果popup -->
		<van-popup :show="resultPopShow" position="bottom">
			<van-picker show-toolbar :columns="resultNameList" @confirm="onResultConfirm"
				@cancel="resultPopShow = false" />
		</van-popup>

		<!-- 客户意向popup -->
		<van-popup :show="intentionPopShow" position="bottom">
			<van-picker show-toolbar :columns="intentionNameList" @confirm="onIntentionConfirm"
				@cancel="intentionPopShow = false" />
		</van-popup>

		<!-- 战败原因popup -->
		<van-popup :show="defeatPopShow" position="bottom">
			<van-picker show-toolbar :columns="defeatNameList" @confirm="onDefeatConfirm"
				@cancel="defeatPopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				type: "",
				wxType: "",
				resultPopShow: false,
				isComeShopShow: false,
				isNextContactShow: false,
				isFailReasonShow: false,
				resultNameList: [],
				resultIdList: [],
				result: "",
				resultId: -1,
				intentionPopShow: false,
				intention: "",
				intentionNameList: ['有意向', '一般', '无意向'],
				nextConnectionTime: "",
				comeShopTime: "",
				defeatPopShow: false,
				defeat: "",
				defeatNameList: ['价格问题', '号码错误', '品牌问题', '外地购买', '油卡问题', '熟人办理', '理赔服务', '车辆已卖', '其他'],
				remark: "",
				comeShopHs: "请选择客户预约时间"
			}
		},
		onShow() {
			const tokenInfo = uni.getStorageSync("tokenInfo");
		},
		onLoad(options) {
			const wxType = uni.getStorageSync("wxType");
			this.wxType = wxType;
			if (options && options.type == 'edit') {
				this.type = options.type;
				const xubaoItem = uni.getStorageSync("xubaoItem");
				if (xubaoItem.result && xubaoItem.result != "") {
					this.result = xubaoItem.result;
				}
				if (xubaoItem.nextKeepTime && xubaoItem.nextKeepTime != "") {
					this.nextConnectionTime = xubaoItem.nextKeepTime;
					this.isNextContactShow = true;
				}
				if (xubaoItem.appointmentTime && xubaoItem.appointmentTime != "") {
					this.comeShopTime = xubaoItem.appointmentTime;
					this.isComeShopShow = true;
				}
				if (xubaoItem.remark && xubaoItem.remark != "") {
					this.remark = xubaoItem.remark;
				}
			}
			this.handleGetWxResultList();
		},
		methods: {
			bindTimeChange: function(e) {
				this.comeShopHs = e.detail.value;
				console.log('预约时间', e.detail.value);
			},
			// 获取维系结果选项
			handleGetWxResultList() {
				const wxType = uni.getStorageSync("wxType");
				getApp().showLoading();
				if (wxType == 'xubao') {
					apiRqs._getXubaoResultList().then((res) => {
						uni.hideLoading();
						console.log('续保维系结果选项', res);
						if (res.code == 200) {
							let nameList = [];
							let idList = [];
							let resultList = JSON.parse(JSON.stringify(res.data));
							for (let i = 0; i < resultList.length; i++) {
								nameList.push(resultList[i].result);
								idList.push(resultList[i].id);
							}
							this.resultNameList = nameList;
							this.resultIdList = idList;
						} else {
							getApp.showToast(res.msg);
							uni.navigateBack();
						}
					})
				} else if (wxType == 'dingbao') {
					apiRqs._getDingbaoResultList().then((res) => {
						uni.hideLoading();
						console.log('定保维系结果选项', res);
						if (res.code == 200) {
							let nameList = [];
							let idList = [];
							let resultList = JSON.parse(JSON.stringify(res.data));
							for (let i = 0; i < resultList.length; i++) {
								nameList.push(resultList[i].result);
								idList.push(resultList[i].id);
							}
							this.resultNameList = nameList;
							this.resultIdList = idList;
						} else {
							getApp.showToast(res.msg);
							uni.navigateBack();
						}
					})
				}
			},
			// 打开执行结果popup
			handleOpenResultPopup() {
				this.resultPopShow = true;
			},
			// 执行结果popup确认
			onResultConfirm(value) {
				const index = value.detail.index;
				const resultValue = value.detail.value;
				const preSuffix = resultValue.substring(0, 2);
				if (preSuffix == "完成" && resultValue == '完成-提醒完成') {
					this.isComeShopShow = true;
					this.isNextContactShow = false;
				} else if (preSuffix == "完成" && resultValue != '完成-提醒完成') {
					this.isComeShopShow = false;
					this.isNextContactShow = false;
				} else if (preSuffix == "继续") {
					this.isComeShopShow = false;
					this.isNextContactShow = true;
				} else if (preSuffix == "放弃") {
					this.isComeShopShow = false;
					this.isNextContactShow = false;
				}
				this.result = resultValue;
				this.resultId = this.resultIdList[index];
				this.resultPopShow = false;
			},
			// 打开客户意向popup
			handleOpenIntentionPopup() {
				this.intentionPopShow = true;
			},
			// 客户意向popup确认
			onIntentionConfirm(value) {
				console.log(value);
				this.intention = value.detail.value;
				this.intentionPopShow = false;
			},
			// 下次联系时间
			nextContactChange(e) {
				this.nextConnectionTime = e + " 00:00:00";
				console.log('change事件:', this.nextConnectionTime);
			},
			// 客户到店时间
			comeShopChange(e) {
				this.comeShopTime = e;
				console.log('change事件:', this.comeShopTime);
			},
			// 打开战败结果popup
			handleOpenDefeatPopup() {
				this.defeatPopShow = true;
			},
			// 战败结果popup确认
			onDefeatConfirm(value) {
				console.log(value);
				this.defeat = value.detail.value;
				this.defeatPopShow = false;
			},
			// 提交维系结果
			handleSubmit() {
				const xubaoItem = uni.getStorageSync("xubaoItem");
				const wxType = uni.getStorageSync("wxType");
				let rqsData = {
					"id": xubaoItem.id,
					"result": this.result,
					"reason": null,
					"nextKeepTime": null,
					"remark": this.remark,
					"appointmentTime": null
				};
				const resultValue = this.result;
				if (resultValue) {
					const preSuffix = resultValue.substring(0, 2);
					if (preSuffix == '完成' && resultValue == '完成-提醒完成' && wxType == 'dingbao') {
						if (this.comeShopTime == null || this.comeShopTime == "" || this.comeShopTime == undefined) {
							getApp().showToast('预约日期不能为空');
							return false;
						} else if (this.comeShopHs == null || this.comeShopHs == "" || this.comeShopHs == undefined) {
							getApp().showToast('预约时间不能为空');
							return false;
						} else {
							rqsData.appointmentTime = this.comeShopTime + " " + this.comeShopHs + ":00";
							rqsData.nextKeepTime = null;
						}
					} else if (preSuffix == '继续') {
						if (this.nextConnectionTime == null || this.nextConnectionTime == "" || this.nextConnectionTime ==
							undefined) {
							getApp().showToast('下次联系时间不能为空');
							return false;
						} else {
							rqsData.nextKeepTime = this.nextConnectionTime;
							rqsData.appointmentTime = null;
						}
					} else if (preSuffix == '放弃') {
						rqsData.nextKeepTime = null;
						rqsData.appointmentTime = null;
					}
					console.log(rqsData);
					getApp().showLoading();
					if (this.type == 'edit') {
						apiRqs._editWxResult(rqsData).then((res) => {
							console.log('修改结果', res);
							uni.hideLoading();
							if (res.code == 200) {
								getApp().showToast('修改成功', 'success');
								setTimeout(() => {
									uni.navigateBack({
										delta: 2
									});
								}, 1500)
							} else {
								getApp().showToast(res.msg);
							}
						})
					} else {
						apiRqs._submitWxResult(rqsData).then((res) => {
							console.log('提交结果', res);
							uni.hideLoading();
							if (res.code == 200) {
								getApp().showToast('提交成功', 'success');
								setTimeout(() => {
									uni.navigateBack({
										delta: 2
									});
								}, 1500)
							} else {
								getApp().showToast(res.msg);
							}
						})
					}

				} else {
					getApp().showToast('执行结果不能为空');
					return false;
				}
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.xubao-result {

		.create-project-form {
			margin: 20px;

			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 16px 15px;
				box-sizing: border-box;
				position: relative;

				.uni-time-placeholder {
					.uni-input {
						color: #ddd;
					}
				}

				.uni-input {
					font-size: 14px;
					color: #666666;
				}

				.uni-date-x {
					padding: 0;

					.uni-icons {
						display: none;
					}

					.uni-date__x-input {
						padding: 0;
						font-size: 14px;
						color: #666666;
					}
				}



				.right-arrow-icon {
					position: absolute;
					right: 10px;
				}

				&:first-child {
					border-top: 1px solid #f5f5f5;
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}

				&:last-child {
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
				}

				.info-item-title {
					width: 100px;
					flex: 0 0 100px;
					font-size: 14px;

					.import-tips {
						font-size: 12px;
						color: red;
					}
				}

				.info-item-input {
					flex: 1;
					min-width: 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-size: 14px;
					text-align: left;
					color: #666666;
					padding-right: 10px;
					box-sizing: border-box;
				}

				.placeholderFontClass {
					color: #ddd;
				}
			}


		}

		.create-btn {
			margin: 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&::after {
				border: none;
			}

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
